<template>
  <nut-form :model-value="pageData.formData" ref="formData">
    <nut-form-item label="头像" label-width="70">
      <view class="avatar">
        <button type="default" open-type="chooseAvatar" class="btn-avatar" @chooseavatar="chooseAvatar"></button>
        <nut-avatar size="large">
          <image :src="baseUrl + pageData.formData.avatar" />
        </nut-avatar>
      </view>
    </nut-form-item>
    <nut-form-item label="昵称" label-width="70">
      <nut-input v-model="pageData.formData.nickName" placeholder="请输入昵称" type="nickname" />
    </nut-form-item>
    <nut-form-item label="性别" label-width="70">
      <nut-radio-group v-model="pageData.formData.sex" direction="horizontal">
        <nut-radio label="0">男</nut-radio>
        <nut-radio label="1">女</nut-radio>
        <nut-radio label="2">未知</nut-radio>
      </nut-radio-group>
    </nut-form-item>
    <nut-form-item label="手机" label-width="70">
      <nut-input v-model="pageData.formData.phonenumber" disabled  class="nut-input-text" placeholder="请获取手机号码" type="text">
        <template  #right>
          <nut-button type="primary" size="mini" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</nut-button>
        </template >
      </nut-input>
    </nut-form-item>
    <nut-form-item label="邮箱" label-width="70">
      <nut-input v-model="pageData.formData.email" placeholder="请输入邮箱" />
    </nut-form-item>
    <nut-form-item label="备注" label-width="70">
      <nut-input v-model="pageData.formData.remark" placeholder="请输入备注" />
    </nut-form-item>
    <nut-form-item label="签字" label-width="70">
      <view v-if="pageData.formData.signUrl">
        <image :src="host + pageData.formData.signUrl" style="width: 260px;height: 150px;" />
        <nut-button size="mini" type="primary" @click="clearSign('signUrl')">重签</nut-button>
      </view>
      <signature v-else :field="'signUrl'" @confirm="confirmSign" @clear="clearSign" @set-full-screen="(v) => setFullScreen(v, 'signUrl')"></signature>
    </nut-form-item>
  </nut-form>
  <nut-cell>
    <nut-button type="primary" block @click="submit">提交</nut-button>
  </nut-cell>
  <view v-if="isFullScreen" class="fullscreen-sign">
    <view class="sign">
      <nut-signature
          ref="fullscreenSign"
          custom-class="fullscreenSign"
          @confirm="(canvas, data) => confirmSignFs(canvas, data, currentSign)"
          @clear="clearSign(currentSign)"
      />
      <canvas v-if="signWidth && signHeight" canvas-id="fullscreenCanvas" :style="`width:${signHeight}px; height:${signWidth}px;position: absolute;left: -9999px;`"></canvas>
    </view>
    <view class="btn">
      <nut-button type="primary" @click="closeFullScreen">关闭全屏</nut-button>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref} from "vue";
import { getPhoneNum, updateUserInfo, uploadUrl } from "@/api"
import {baseUrl, host} from "@/utils/config"
import Signature from "@/components/signature"

const pageData = reactive({
  formData: {}
})
const chooseAvatar = (e) => {
  console.log('eeeee', e, e.detail.avatarUrl)
  // uni.uploadFile({
  //   url: uploadUrl,
  //   filePath: e.detail.avatarUrl,
  //   success: (res) => {
  //     console.log('avatar', res)
  //     pageData.formData.avatar = JSON.parse(res.data).fileName
  //   }
  // })
  uni.uploadFile({
    url: uploadUrl, //上传图片的后端接口
    filePath: e.detail.avatarUrl,
    name: 'file',
    success: res => {
      console.log('rrrrrrrrr', res)
      pageData.formData.avatar = JSON.parse(res.data).fileName
    }
  })
}

const getPhoneNumber = (e) => {
  console.log('eeeeee', e)
  const params = {
    code: e.detail.code,
    openid: uni.getStorageSync('userInfo').openId
  }
  getPhoneNum(params).then(res => {
    console.log('getNum', res)
    pageData.formData.phonenumber = res.data.phone_info.phoneNumber
  })
}


const fullscreenSign = ref(null)
const isFullScreen = ref(false)
const currentSign = ref('')
const closeFullScreen = () => {
  isFullScreen.value = false
}
const setFullScreen = (v, field) => {
  isFullScreen.value = true
  currentSign.value = field
}
const signWidth = ref(null)
const signHeight = ref(null)
const confirmSignFs = (canvas, data, type) => {
  console.log('data', canvas, data)
  console.log('canvas', canvas.canvasId)
  uni.getImageInfo({
    src: data,
    success: function(res) {
      signWidth.value = res.width
      signHeight.value = res.height
      console.log('wh', signWidth.value, signHeight.value)
      const ctx = uni.createCanvasContext('fullscreenCanvas')
      console.log('ctx', ctx)
      ctx.translate(0, signWidth.value)
      ctx.rotate((270 * Math.PI) / 180)
      ctx.drawImage(data, 0, 0, signWidth.value, signHeight.value)
      // ctx.drawImage(data, 0, 0, width, height)
      ctx.draw()
      setTimeout(() => {
        uni.canvasToTempFilePath({
          canvasId: 'fullscreenCanvas',
          success: function(res) {
            // 在H5平台下，tempFilePath 为 base64
            console.log('resssssssss', res.tempFilePath)
            uni.uploadFile({
              url: uploadUrl, //上传图片的后端接口
              filePath: res.tempFilePath,
              name: 'file',
              success: res => {
                console.log('rrrrrrrrr', res)
                pageData.formData[type] = JSON.parse(res.data).fileName
                isFullScreen.value = false
              }
            })
            pageData.formData[type] = data
          },
          fail: function (err) {
            console.log('errrrrrrr', err)
          }
        })
      }, 200)
    },
    fail: function(res) {
      console.log('errr', res)
    }
  })
}

const clearSign = (type) => {
  pageData.formData[type] = ''
}
const confirmSign = (data, type) => {
  console.log('data', data)
  if (data === '') {
    return false
  }
  uni.uploadFile({
    url: uploadUrl, //上传图片的后端接口
    filePath: data,
    name: 'file',
    success: res => {
      console.log('rrrrrrrrr', res)
      pageData.formData[type] = JSON.parse(res.data).fileName
    }
  })
  // pageData.formData[type] = data
}

const submit = () => {
  console.log('pageData.formData', pageData.formData)
  updateUserInfo(pageData.formData).then(res => {
    console.log('update', res)
    uni.setStorageSync('userInfo', pageData.formData)
    uni.navigateBack()
  })
}
pageData.formData = uni.getStorageSync('userInfo')
console.log('formData', pageData.formData)
</script>

<style scoped lang="scss">
.avatar{
  position: relative;
  .btn-avatar{
    width: 60px;
    height: 60px;
    position: absolute;
    background: none;
    border: none;
    z-index: 9;
  }
}
.btn-avatar:after{border: none;}
</style>
